<template>
    <div class="person">
        <h2>一辆{{car.brand}}车，价值{{car.price}}万</h2>
        <button @click="changePrice">修改汽车的价格</button>
        <button @click="changeCar">修改汽车</button>//  !!!
        <br>
        <h2>游戏列表</h2>
        <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changeFirstName">修改第一个游戏的名字</button>
    </div>
</template>

<script setup lang="ts" name="Person">//作用：配组合式API
    import { ref} from 'vue';
    //data
    let car = ref({
        brand:'奔驰',
        price:100
    })
    let games = ref([
        {id:'01',name:"王者荣耀"},
        {id:'02',name:"原神"},
        {id:'03',name:"三国杀"}
    ]
)
    //methods
    function changePrice(){
        car.value.price +=10
    }
    function changeCar(){
        Object.assign(car,{brand:'byd',price:200})//   !!!
    }
    function changeFirstName(){
        games.value[0].name = "皇室战争"
    }
</script>
<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>